<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 bootstrap 样式表 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <style>
      body {
        padding-top: 50px;
      }
    </style>
  </head>

  <body>
    <!-- 栅格系统 -->
    <div class="container">
      <div class="d-flex justify-content-between align-items-center">
        <h1>图书管理</h1>
        <button
          class="btn btn-success btn-sm"
          data-bs-toggle="modal"
          data-bs-target="#addModal"
        >
          添加
        </button>
      </div>
      <table
        class="table table-bordered table-striped table-dark table-hover text-center"
      >
        <thead>
          <!-- 表头行 -->
          <tr>
            <th scope="col">Id</th>
            <th scope="col">书名</th>
            <th scope="col">作者</th>
            <th scope="col">出版社</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 表格中的每一行 -->
          <!-- <tr>
            <th scope="row">xxx</th>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>
              <button type="button" class="btn btn-link btn-sm btn-delete">
                删除
              </button>
              <button type="button" class="btn btn-link btn-sm btn-update">
                编辑
              </button>
            </td>
          </tr> -->
        </tbody>
      </table>
    </div>
    <!-- add Modal -->
    <div class="modal fade" id="addModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加图书</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="addForm" class="p-3">
              <!-- 书名 -->
              <div class="mb-3">
                <label class="form-label">书名</label>
                <input
                  type="text"
                  name="bookname"
                  class="form-control"
                  placeholder="请输入图书名称"
                  name="bookname"
                />
              </div>
              <!-- 作者 -->
              <div class="mb-3">
                <label class="form-label">作者</label>
                <input
                  type="text"
                  name="author"
                  class="form-control"
                  placeholder="请输入作者名字"
                  name="author"
                />
              </div>
              <!-- 出版社 -->
              <div class="mb-3">
                <label class="form-label">出版社</label>
                <input
                  type="text"
                  name="publisher"
                  class="form-control"
                  placeholder="请输入出版社名称"
                  name="publisher"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="btn btn-primary" id="addBtn">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- add Modal -->
    <div class="modal fade" id="editModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">编辑图书</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="editForm" class="p-3">
              <input type="hidden" name="id" />
              <!-- 书名 -->
              <div class="mb-3">
                <label class="form-label">书名</label>
                <input
                  type="text"
                  name="bookname"
                  class="form-control"
                  placeholder="请输入图书名称"
                  name="bookname"
                />
              </div>
              <!-- 作者 -->
              <div class="mb-3">
                <label class="form-label">作者</label>
                <input
                  type="text"
                  name="author"
                  class="form-control"
                  placeholder="请输入作者名字"
                  name="author"
                />
              </div>
              <!-- 出版社 -->
              <div class="mb-3">
                <label class="form-label">出版社</label>
                <input
                  type="text"
                  name="publisher"
                  class="form-control"
                  placeholder="请输入出版社名称"
                  name="publisher"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="btn btn-primary" id="editBtn">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 引入 lib 目录下的 bootstrap 和 axios -->
    <script src="./lib/axios.js"></script>
    <!-- 快速获取表单数据  key=value {key:value}  -->
    <script src="./lib/form-serialize.js"></script>
    <!-- bootstrap的js -->
    <script src="./lib/bootstrap.min.js"></script>
    <script>
      //渲染数据
      async function xu(){
        const dtd=await axios.get("http://ajax-api.itheima.net/api/books")
        console.log(dtd);
        const dd=dtd.data.data.map((item)=>{
          const {id,bookname,author,publisher }=item
          return ` <tr>
            <th scope="row">${id}</th>
            <td>${bookname}</td>
            <td>${author}</td>
            <td>${publisher}</td>
            <td>
              <button type="button" data-id="${id}"   class="btn btn-link btn-sm btn-delete">
                删除
              </button>
              <button type="button" data-id="${id}"   class="btn btn-link btn-sm btn-update">
                编辑
              </button>
            </td>
          </tr>`
        }).join("")
          document.querySelector("tbody").innerHTML=dd
       
      }
      xu()
      //添加
      const addModal=new bootstrap.Modal(document.querySelector("#addModal"))
      document.querySelector("#addBtn").addEventListener("click", async function(){
        //获取表单
        const data = serialize(document.querySelector("#addForm"), {
          hash: true,
        });
        //发送请求
        try{
          const tan=await axios.post("http://ajax-api.itheima.net/api/books",data)
          console.log(tan);
          if(tan.status==201){
            alert("添加成功")
            //关闭
            addModal.hide();
            //清空
            document.querySelector("#addForm").reset();
            xu()
          }
        }catch(e){
          console.log(e);
        }        
      })
      //删除功能用事件委托要拿到父元素
      document.querySelector("tbody").addEventListener("click", async function(e){
        //判断是否点击删除
        try{
          if(e.target.classList.contains("btn-delete")){
          const id=e.target.dataset.id
          //发送请求
          const del=await axios.delete(`http://ajax-api.itheima.net/api/books/${id}`)
            
          //删除成功
          if(del.status==204){
            xu()
          }
        }
        }catch(e){
          console.log(e);
        }
        
      })
//编辑页面
//数据处理
const you = new bootstrap.Modal(document.getElementById("editModal"));
//事件委托
document.querySelector("tbody").addEventListener("click",async function(e){
  if(e.target.classList.contains("btn-update")){
    const id=e.target.dataset.id;
    const fa=await axios.get(`http://ajax-api.itheima.net/api/books/${id}`)
    console.log(fa);
    you.show()
        const data=fa.data.data
        document.querySelector("#editForm [name=bookname]").value =
              data.bookname;
            document.querySelector("#editForm [name=author]").value =
              data.author;
            document.querySelector("#editForm [name=publisher]").value =
              data.publisher;
            //设置隐藏域的值
            document.querySelector("#editForm [name=id]").value = data.id;
  }

})
//修改
document.querySelector("#editBtn").addEventListener("click",async  function(){
  const data = serialize(document.getElementById("editForm"), {
          hash: true,
        });
        const xi=await axios.put(`http://ajax-api.itheima.net/api/books/${data.id}`,data)
        if (xi.status === 200) {
            //关闭修改模态框
            you.hide();
            //重新渲染页面
            xu()
          }
})
    </script>
  </body>
</html>
